<template>
  <div class="table">
    <!-- 顶部按钮 -->
    <el-row>
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="warning" @click="refresh">刷新</el-button>
    </el-row>
    <!-- 表单数据 -->
    <el-table
      :data="tableData"
      v-loading="tableLoading"
      style="width: 100%"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children' }"
    >
      <el-table-column
        fixed
        prop="id"
        label="部门号"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="deptName"
        label="部门名"
        width="300"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="update(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button @click="remove(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增或编辑对话框-->
    <el-drawer title="部门管理" :visible.sync="drawer" :wrapperClosable="false">
      <div>
        <el-form
          v-loading="drawerLoading"
          ref="form"
          :model="deptData"
          label-width="80px"
        >
          <!-- 隐藏域，用于保存id-->
          <el-input type="hidden" v-model="deptData.id"></el-input>

          <el-form-item label="部门名">
            <el-input type="text" v-model="deptData.deptName"></el-input>
          </el-form-item>

          <el-form-item label="所属部门">
            <el-cascader
              :options="deptOptions"
              v-model="deptData.parentId"
              :props="{
                checkStrictly: true,
                emitPath: false,
                label: 'deptName',
                value: 'id',
              }"
              clearable
            ></el-cascader>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="save">提交</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      deptData: { id: null, deptName: "", parentId: null },
      deptOptions: [],
      tableLoading: false,
      drawer: false,
      drawerLoading: false,
    };
  },
  methods: {
    async initDrawer() {
       await this.$http.get("/dept/tree").then((result) => {
        this.deptOptions = result.data;
      });
    },
    // 新增按钮事件
    async add() {
      this.deptData.id = null;
      this.deptData.deptName = "";
      this.deptData.parentId = null;
      this.drawer = true;
      this.drawerLoading = true;
      this.initDrawer();
      this.drawerLoading = false;
    },
    // 刷新按钮事件
    async refresh() {
      this.tableLoading = true;
      let result = await this.$http.get("/dept/tree");
      console.log(result);
      this.tableData = result.data;
      this.tableLoading = false;
    },
    // 表格编辑按钮事件
    async update(row) {
        this.drawer = true;
        this.drawerLoading = true;
        let result = await this.$http.get("/dept/" + row.id);
        this.deptData = result.data;
        console.log(this.deptData)
        this.drawerLoading = false;
        this.refresh();
    },
    // 表格删除按钮事件
    remove(row) {
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          let result = await this.$http.delete("/dept/" + row.id);
          this.$message.success(result.msg);
          this.refresh();
        });
    },
        // 侧边栏取消按钮事件
    cancel() {
      this.$refs.form.resetFields();
      this.drawer = false;
    },
    // 侧边栏保存按钮事件
    async save() {
      let result = await this.$http.post("/dept", this.deptData);
      this.$message.info("保存成功");
      this.drawer = false;
      this.refresh();
    },
  },
  mounted() {
    this.refresh();
  },
};
</script>

<style lang="less" scoped>
.table {
    .el-row {
        margin: 10px;
    }
}

.el-drawer {
    div {
        margin: 10px;
    }
}
</style>